<template>
  <div>
    <div class="lists-top">
      <!-- <search></search> -->
      <lists-nav :navData="navData"
                 @changeOrderType='changeOrderType'></lists-nav>
    </div>
    <div class="lists-wrapper">
      <!-- 待审核 -->
      <!-- 待付款 -->
      <!-- 待发货 -->
      <!-- 待收货 -->
      <!-- 已收货 -->
      <!-- 已拒绝 -->
      <lists-all ref="listAll"></lists-all>

    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import listsNav from './components/listsNav/index'
import listsAll from './components/listsAll/index'
import { getTryList } from '@/api/user/member/memberApi'
export default Vue.extend({
  name: 'index',
  components: {
    listsNav,
    listsAll
  },
  data() {
    return {
      query: '',
      curType: 1,
      navData: {
        curType: 1
      }
    }
  },
  methods: {
    getOrderType() {
      getTryList().then(res => {
        if (res.status == 1) {
          if (res.data.showType == 2) {
            this.navData.curType = 2
          } else {
            this.navData.curType = 1
          }
        } else {
          this.$Error(res.msg)
        }
      })
    },
    changeOrderType(type) {
      this.curType = type
      this.$Bus.$emit('statusEvent', { status: type })
    }
  },
  created() {
    this.getOrderType()
  },
  mounted() {
    // TODO 触底加载
    window.addEventListener('reachbottom', () => {
      this.$refs.listAll.onLoad()
    })
  },
  watch: {
    curType(val) {
      this.navData.curType = val
    }
  }
})
</script>

<style lang="scss">
.lists-top{
  position:fixed;
  top:0;
  left:0;
  right: 0;
  margin: 0 auto;
  max-width: 750px;
  z-index:3;
  width:100%;
  border-radius: 0 0 20px 20px;
  overflow: hidden;
}
.lists-wrapper{
  padding-top:100px;
}
</style>